@import models.Tables.GenomeRow

@(row: GenomeRow)(implicit session: Session)

@title = @{
    row.species match{
        case "CON" => " <i>Camellia oleifera </i> Abel. var. “Nanyongensis”"
        case "Camellia_lanceoleosa" => " <i>Camellia lanceoleosa </i>"
        case "Coleifera" => " <i>Camellia chekiangoleosa </i>"
        case "Camellia_crapnelliana" => " <i>Camellia crapnelliana </i>"
    }
}

    @getAnno(anno: String, href: String) = @{
        anno.split(";").map { x =>
            val line = x.split("::")
            if(line.length>1){
                s"<a href='$href${line.head}' target='_blank'>${line.head}</a> : ${line.last} <br/>"
            }else{
                s"<a href='$href${line.head}' target='_blank'>${line.head}</a> "
            }
        }.mkString
    }

    @config.main(row.geneid) {
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("mscroll/css/lz_index.css")">
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("config/sidebar.css")">

        <div class="body-box">
            <div class="page-box">

                @config.subTitle(row.geneid, title, "/COADB/browse/genomePage/" + row.species)

                <div class="main-body detail-info" style="position: relative">

                    <div class="bs-sidebar" id="myScrollspy">
                        <div class="bs-docs-sidebar affix" id="myNav">
                            <ul class="bs-docs-sidenav nav" >
                                <li class="active"><a href="#basic">Basic info</a></li>
                                <li><a href="#anno">Annotation</a></li>
                                <li><a href="#syntenyBox">Synteny Block</a></li>
                                <li><a href="#block">Block</a></li>
                                <li><a href="#jbrowse">Jbrowse</a></li>
                                <li><a href="#fpkm">Expression</a></li>
                                <li><a href="#seqs">Seqs</a></li>
                            </ul>
                        </div>
                    </div>

                    @components.scrollComponents("Basic info", "basic") {

                        <table class="table table-hover table-bordered">
                            <tbody>
                                <tr><th>Gene ID</th><td>@row.geneid</td></tr>
                                <tr><th>Chromsome</th><td>@row.chr</td></tr>
                                <tr><th>Start Position</th><td>@row.start</td></tr>
                                <tr><th>End Position</th><td>@row.end</td></tr>
                                <tr><th>Strand</th><td>@row.strand</td></tr>
                            </tbody>
                        </table>
                    }

                    @components.scrollComponents("Annotation", "anno") {
                        <table class="table table-hover table-bordered">
                            <tbody>

                                <tr><th>NR tophit name</th><td>@row.nrname</td></tr>
                                <tr><th>NR Tophit descrip</th><td>@row.nrdes</td></tr>
                                <tr><th>Swiss tophit name</th><td>@row.swissname</td></tr>
                                <tr><th>Swiss Tophit descrip</th><td>@row.swissdes</td></tr>
                                <tr><th>COG/KOG</th><td>@row.cog</td></tr>
                                <tr><th>GO</th><td>@Html(getAnno(row.go, "http://amigo.geneontology.org/amigo/term/"))</td></tr>

                                <tr><th>KO</th><td>@Html(getAnno(row.ko, "https://www.kegg.jp/dbget-bin/www_bget?ko:"))</td></tr>
                                <tr><th>KEGG GENE NAME</th><td>@row.kegg</td></tr>

                                <tr><th>Pfam</th><td>@Html(getAnno(row.pfam, "http://pfam.xfam.org/family/"))</td></tr>
                            </tbody>
                        </table>
                    }

                    @components.scrollComponents("Synteny Block","syntenyBox") {
                        <div style="width: 100%">

                            <table class="table table-bordered table-hover"  data-pagination="true" id="syntenyTable"
                            data-page-list="[10, 25, 50, 100, all]" style="width: 100%" >
                                <thead>
                                    <tr>
                                        <th data-field='name' data-sortable='true' data-search-type="text" data-formatter="GetBlock">Block
                                            ID
                                        </th>
                                        <th data-field='query' data-sortable='true' data-search-type="text">Query</th>
                                        <th data-field='queryStart' data-sortable='true' data-search-type="num">Start</th>
                                        <th data-field='queryEnd' data-sortable='true' data-search-type="num">Stop</th>
                                        <th data-field='querySize' data-sortable='true' data-search-type="num">Query gap size</th>
                                        <th data-field='ref' data-sortable='true' data-search-type="text">Reference</th>
                                        <th data-field='refStart' data-sortable='true' data-search-type="num">Start</th>
                                        <th data-field='refEnd' data-sortable='true' data-search-type="num">Stop</th>
                                        <th data-field='refSize' data-sortable='true' data-search-type="num">Ref gap size</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    }

                    @components.scrollComponents("Block","block") {
                        <div style="width: 100%">

                            <div id="table-check" class="my-checkbox"></div>
                            <table class="table table-hover" id="table" data-pagination="true" data-advanced-sortable="true"
                            data-page-list="[10]">

                            </table>
                        </div>

                    }

                    @components.scrollComponents("Jbrowse", "jbrowse") {
                        <iframe style="border: 1px solid rgb(80, 80, 80);" id="iframe" height="300" width="100%"
                        name="jbrowse_iframe">
                        </iframe>
                    }


                    @components.scrollComponents("FPKM", "fpkm") {
                        <div style="width: 100%">
                            <div id="transPlot"></div>
                        </div>
                    }

@*
                    @components.scrollComponents("eQTL", "qtl") {
                        <div style="width: 100%">
                            @components.tableComponent("qtlTable")
                        </div>
                    }

*@

                    @components.scrollComponents("Seqs", "seqs") {
                        <table class="table table-hover table-bordered">
                            <tbody>
                                <tr><th width="20%">
                                    CDS<button class="btn" onclick="downloadSeq('@row.geneid', 'cds')"><i class="fa fa-download"></i></button></th><td class="monospace"><div class="seq">
                                    >@row.geneid<br/> <div id="cds"></div></div></td></tr>
                                <tr><th>
                                    Protein<button class="btn" onclick="downloadSeq('@row.geneid', 'pep')"><i class="fa fa-download"></i></button></th><td class="monospace"><div class="seq">
                                    >@row.geneid<br/> <div id="pep"></div></div></td></tr>

                            </tbody>
                        </table>
                    }

                </div>
            </div>
        </div>
        <script src="@routes.Assets.versioned("mscroll/js/mscroll.js")" type="text/javascript"></script>
        <script src="@routes.Assets.versioned("config/sidebar.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/highcharts-more.js")" type ="text/javascript"></script>
    <script src="@routes.Assets.versioned("Highcharts-9.0.1/modules/exporting.js")" type ="text/javascript"></script>

        <script>

                $(function () {
                    $('body').scrollspy({target: '#myScrollspy'})

                    $("#myNav").affix({
                        offset: {
                            top: 200
                        }
                    });

                    let host = window.location.hostname;

                        $("#iframe").attr("src", "/jbrowse/?data=my_data/COADB/@{row.species}/data&loc=@row.chr:@row.start..@row.end&tracks=DNA,Annotation&tracklist=0&nav=1&overview=0")


                    $.post("@routes.GenomeController.getFpkm(row.geneid)", (data) => {
                        if(data.valid === "false") {
                            $("#transPlot").html("<h4>Not Found!</h4>")
                        }else {
                            getBoxPlot(data.plot,"transPlot","@{row.geneid}",data.header)
                        }

                    })

/*                    $.post("@routes.GenomeController.getQTLInfo(row.id.toString)", (data) => {
                        if(data.valid === "false") {
                            $("#transPlot").html("<h4>Not Found!</h4>")
                        }else {
                            let header = {}
                            $.each(data.header,(i,v)=>{
                                header[`${i}`] = {"title": v, "search": {"types": "text"}}
                            })
                            let columns = getTableColumns(header,"qtlTable")
                            $("#qtlTable").bootstrapTable({
                                data: data.qtl,
                                columns:columns
                            })

                        }

                    })*/

                    $.post("@routes.GenomeController.getInfos(row.id)", (data) => {

                        if(data.blockRange.length > 0){
                            $("#syntenyTable").bootstrapTable({data:data.blockRange})
                        }else{

                            $("#syntenyBox").find(".picture_list").html("<h4>Not Found!</h4>")
                        }

                        if (data.block !== "false") {
                            $.post("/COADB/genome/getByGeneIds?geneid=" + data.block).then(res1 => {
                                const columns =  getTableColumns(genomeHeader,"table")
                                $("#table").bootstrapTable({
                                    data:res1,
                                    columns:columns
                                })
                                let hide = ["nrdes","nrname","swissdes","swissname","go"]

                                hide.forEach(v => {
                                    $('#table').bootstrapTable('hideColumn', v);
                                    $("input:checkbox[value=" + v + "]").attr("checked", false)
                                })
                            })

                        }else {
                            $("#block").find(".picture_list").html("<h4>Not Found!</h4>")
                        }


                        if (data.valid === "false") {
                            console.log(data.msg)
                        } else {
                            $("#cds").text(data.cds)
                            $("#pep").text(data.pep)
                        }
                    })

                })

                function GetBlock(value, row) {
                    return `<a href="/COADB/synteny/syntenyInfoPage/${row.id}" target="_blank">${value}</a>`
                }


                function getBoxPlot(data, id, title,header) {
                    Highcharts.chart(id, {
                        chart: {
                            type: 'column'
                        },
                     //   colors: ["#C23531", "#61A0A8", "#2F4554", "#D48265", "#CA8622", "#91C7AE", "#6E7074", "#C4CCD3", "#546570"],
                        credits: {
                            enabled: false
                        },
                        title: {
                            text: title
                        },
                        xAxis: {
                            categories: header
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'FPKM'
                            }
                        },
                        legend: {
                            enabled: false
                        },

                        tooltip: {
                            formatter: function () {
                                return '<b>' + this.x + '</b><br/>' +
                                        'FPKM: ' + this.point.stackTotal;
                            }
                        },
                        plotOptions: {
                            series: {
                                colorByPoint: true
                            },
                            column: {
                                stacking: 'normal'
                            }
                        },
                        series: [{
                            data: data,

                        }]
                    });
                }


                function downloadSeq(name, types) {
                    let fileName = name + "_" + types + ".fa";
                    let content = ">" + name + "\n" + $("#" + types).text().trim();
                    let blob = new Blob([content], {
                        type: "text/plain;charset=utf-8"
                    });
                    saveAs(blob, fileName)
                }

        </script>
    }